<template>
  <el-dialog
    top="30px"
    width="800px"
    class="dialog-sm"
    append-to-body
    title="退费处理"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <div class="font-weight-bold">基本信息</div>
    <div class="border rounded p-1 bg-light">
      <table class="table table-sm table-borderless">
        <tbody>
          <tr>
            <td width="15%">退费主体：</td>
            <td width="35%">{{ editRow.customer_name || '-' }}</td>
            <td width="15%">地址：</td>
            <td width="35%">{{ editRow.address || '-' }}</td>
          </tr>
          <tr>
            <td>项目负责人：</td>
            <td>{{ editRow.corp_name || '-' }}</td>
            <td>联系电话：</td>
            <td>{{ editRow.mobile_no || '-' }}</td>
          </tr>
          <tr>
            <td>在保余额：</td>
            <td>{{ editRow.left_funds || '-' }}万元</td>
            <td>担保费率：</td>
            <td>{{ editRow.gua_rate || '-' }}%</td>
          </tr>
          <tr>
            <td>缴费金额：</td>
            <td>{{ editRow.actual_warrant_fee || '-' }}元</td>
            <td>缴费时间：</td>
            <td>{{ actualWarrantDate || '-' }}</td>
          </tr>
          <tr>
            <td width="15%">退费金额：</td>
            <td width="35%">{{ editRow.refund_funds || '-' }}元</td>
            <td width="15%">退费时间：</td>
            <td width="35%">{{ refundTime || '-' }}</td>
          </tr>
          <tr>
            <td>退费原因：</td>
            <td colspan="3">{{ editRow.refund_reason || '-' }}</td>
          </tr>
          <tr>
            <td>退费附件：</td>
            <td colspan="3">
              <img-card :images="attachImages"></img-card>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="mt-3 font-weight-bold">退费处理</div>
    <div class="border rounded p-1">
      <table class="table table-sm table-borderless">
        <tbody>
          <tr>
            <td width="15%">附件上传：</td>
            <td width="85%" colspan="3">
              <upload-oss
                multiple
                accept="image/*"
                listType="picture-card"
                ref="attachOss"
                :limit="10"
                :file-list="attachFileList"
                :on-change="handleAttachValidate"
                :on-remove="handleAttachValidate"
                :on-complete="handleImagesComplete"
              ></upload-oss>
            </td>
          </tr>
          <tr>
            <td></td>
            <td colspan="3" class="pt-3">
              <el-button
                type="primary"
                @click="handleConfirm"
                :loading="saveLoading"
                class="btn-long"
              >
                退费处理
              </el-button>
              <el-button @click="handleDismiss" :loading="saveLoading" class="btn-long">
                取消
              </el-button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </el-dialog>
</template>

<script>
import { arrayFromString } from '@vimi/utils-tool'
import { strFromOss } from '@/common/plugins/tools/format'

import ImgCard from '@/components/ImgCard'

export default {
  components: {
    ImgCard,
  },
  props: {
    visible: Boolean,
    editRow: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      saveLoading: false,
      attachFileList: [],
      hasAttach: false,
    }
  },
  computed: {
    attachImages() {
      return arrayFromString(this.editRow.apply_refund_attachment)
    },
    actualWarrantDate() {
      return this.$utils.dateFormat(this.editRow.actual_warrant_date, 'yyyy年MM月dd日')
    },
    refundTime() {
      return this.$utils.dateFormat(this.editRow.refund_time, 'yyyy年MM月dd日')
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
    handleDismiss() {
      this.beforeClose()
    },
    handleAttachValidate(file, fileList) {
      this.hasAttach = fileList.length > 0
    },
    handleImagesComplete(images) {
      const imageStr = strFromOss(images)
      this.applyRefund(imageStr)
    },
    handleConfirm() {
      if (!this.hasAttach) {
        return this.$message.warning('请先选择附件！')
      }
      this.$confirm('确认退费处理?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      })
        .then(() => {
          this.saveLoading = true
          this.$refs.attachOss.submit()
        })
        .catch(() => {})
    },
    async applyRefund(attachs) {
      this.saveLoading = true
      const [res] = await this.$utils.promise(
        this.$api.updateData(this.$serviceName, 'credit_warrant_fee_record', this.editRow.id, {
          refund_status: 2,
          refund_time: this.$utils.dateFormat(new Date()),
          refund_attachment: attachs,
        })
      )
      this.saveLoading = false

      if (!res) {
        return this.$message.error(`退费处理失败，请重试`)
      }

      this.$message.success(`退费处理成功`)
      this.$emit('success')
      this.beforeClose()
    },
  },
}
</script>

<style lang="scss" scoped></style>
